<template>
    <div class="room-page" style="display: flex;padding-right:20px">
        <div class="room-content">
            <img class="room-img" src="@/assets/images/room.png" />
            <el-tooltip effect="light" :content="form.machineRoomName" placement="bottom">
                <div class="room-name">{{ form.machineRoomName }}</div>
            </el-tooltip>
            <div class="save-room-page">
                <el-tooltip effect="light" content="机房变动确认保存" placement="bottom">
                    <img class="save-img" src="@/assets/images/save-room.png" @click="saveRoom" />
                </el-tooltip>
            </div>
        </div>
        <div class="room-content-text">
            <el-form ref="form" :model="form" label-width="90px">
                <el-form-item>
                    <template slot="label">
                        <div class="sw-label">
                            <img src="@/assets/images/camera-img.png" />
                            <span>摄像头</span>
                        </div>
                    </template>
                    <el-select v-model="form.cameraIds" multiple placeholder="请选择" :popper-class="'t-select'"
                        class="ts-select" filterable style="width: 100%;">
                        <el-option v-for="item in cameraList" :key="item.cameraId" :label="item.cameraName"
                            :value="item.cameraId" :disabled="item.disabled && !meCamera.includes(item.cameraId)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        <div class="sw-label">
                            <img src="@/assets/images/transducer.png" />
                            <span>传感器</span>
                        </div>
                    </template>
                    <el-select v-model="form.sensorIds" multiple placeholder="请选择" :popper-class="'t-select'"
                        class="ts-select" filterable style="width: 100%;" >
                        <el-option v-for="item in sensorList" :key="item.sensorId" :label="item.sensorName"
                            :value="item.sensorId" :disabled="item.disabled && !meSensor.includes(item.sensorId)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        <div class="sw-label">
                            <img src="@/assets/images/crate.png" />
                            <span>机箱</span>
                            <img title="添加电台" class="add-crate" src="@/assets/images/add-crate.png"
                                @click="addDevice" />
                        </div>
                    </template>
                    <div class="crate-node" v-for="radio, index in deviceList">
                        <el-form-item label="电台" label-width="40px">
                            <el-select v-model="deviceList[index].radioStationId" placeholder="请选择" clearable
                                :popper-class="'t-select'" class="ts-select" style="width: 90%;" >
                                <el-option v-for="item in radioList" :key="item.radioStationId"
                                    :label="item.radioStationName" :value="item.radioStationId" 
                                    :disabled="((item.disabled && !nowRadio.includes(item.radioStationId)) || meRadio.includes(item.radioStationId) ) && item.radioStationId != deviceList[index].radioStationId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="天线" label-width="40px">
                            <el-select v-model="deviceList[index].antennaId" placeholder="请选择" clearable
                                :popper-class="'t-select'" class="ts-select" style="width: 90%;" >
                                <el-option v-for="item in antennaList" :key="item.antennaId" :label="item.antennaName"
                                    :value="item.antennaId" :disabled="((item.disabled && !nowAntenna.includes(item.antennaId)) || meAntenna.includes(item.antennaId) ) && item.antennaId != deviceList[index].antennaId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div><i title="删除电台" class="el-icon-close delete-device" @click="deleteDevice(index)"></i></div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getRoom, updateRoom } from "@/api/business/room";
import { getRadioStationList } from "@/api/business/station";//电台
import { getSensorListAll } from "@/api/business/sensor";//传感器
import { getCameraListAll } from "@/api/business/camera";//摄像头
export default {
    name: 'editRoom',
    // initSensor 传感器初始化 initCamera: 摄像头初始化
    // changeSensor:传感器变化事件 changeCamera 摄像头变化事件
    emits: ['initSensor', 'initCamera','changeSensor','changeCamera','changeAll'],
    props: {
        // 机房id
        machineRoomId: {},
        // // 摄像头数据
        // cameraList: {
        //     type: Array,
        //     default: []
        // },
        // // 传感器
        // sensorList: {
        //     type: Array,
        //     default: []
        // },
        // // 电台
        // radioList: {
        //     type: Array,
        //     default: []
        // },
        // 天线
        antennaList: {
            type: Array,
            default: []
        },
    },
    computed: {
        // 已选择的天线
        meAntenna() {
            return this.deviceList.map(item=>item.antennaId)
        },
        // 已选择的电台
        meRadio() {
            return this.deviceList.map(item=>item.radioStationId).filter(item=>item!="")
        }
    },
    watch: {
        // 'form.cameraIds'(newValue, beforeValue){
        //     this.$emit('changeCamera',newValue, beforeValue)
        // },
        // 'form.sensorIds'(newValue, beforeValue){
        //     this.$emit('changeSensor',newValue, beforeValue)
        // },
        // cameraList(list) {
        //     console.log("摄像头变化",list)
        // },
    },
    created() {
        this.init();
        this.getRoomDetails();
    },
    data() {
        return {
            form: {},
            // 电台、天线数据
            deviceList: [],
            meCamera: [], // 本身的摄像头,本身的摄像头本身还可以选择
            meSensor: [], // 本身的传感器,本身的传感器本身还可以选择
            nowRadio: [], // 本身的电台,本身的电台本身还可以选择
            nowAntenna: [], // 本身的天线,本身的电台本身还可以选择
            sensorList: [], // 传感器
            cameraList: [], // 摄像头
            radioList: [], // 电台
        }
    },
    methods: {
        init(){
            this.initRadio();
            this.initSensor();
            this.initCamera();
        },
        // 初始化电台
        initRadio() {
            getRadioStationList({ locatedAddress: this.locatedAddress }).then(rs => {
                this.radioList = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
            })
        },
        // 初始化传感器
        initSensor() {
            getSensorListAll({ locatedAddress: this.locatedAddress }).then(rs => {
                const sensorAll = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
                // 室内传感器
                this.sensorList = sensorAll.filter(item => item.inoutType == '1001');
            })
        },
         // 初始化摄像头
         initCamera() {
            getCameraListAll({ locatedAddress: this.locatedAddress }).then(rs => {
                // 室内外所有的摄像头
                const cameraAll = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
                // 室内摄像头
                this.cameraList = cameraAll.filter(item => item.inoutType == '1001');
            })
        },
        // 查询机房
        getRoomDetails() {
            getRoom(this.machineRoomId).then(rs => {
                this.fomartRoom(rs.data);
            })
        },
        // 格式化机房数据
        fomartRoom(room) {
            // 格式化电台
            if(room.pltRadioStationList) {
                const radio = room.pltRadioStationList.map(item=>{
                    let antennaId = item.pltAntennaList?item.pltAntennaList.length > 0 ? item.pltAntennaList[0].antennaId : null:null;
                    let radioStationId = item.radioStationId;
                    return {
                        radioStationId,
                        antennaId
                    }
                });
                // 本机房已选择的电台
                this.nowRadio = radio.map(item=>item.radioStationId);
                // 本机房已选择的天线
                this.nowAntenna = radio.map(item=>item.antennaId);
                this.deviceList = radio;
            }
            // 格式化传感器
            if(room.pltSensorList) {
                const sensor = room.pltSensorList.map(item=>item.sensorId);
                this.meSensor = sensor;
                room.sensorIds = sensor;
                this.$emit('initSensor',sensor)
            }
            // 格式化摄像头
            if(room.pltCameraList) {
                const camera = room.pltCameraList.map(item=>item.cameraId);
                this.meCamera = camera;
                room.cameraIds = camera;
                this.$emit('initCamera',camera)
            }
            delete room.pltRadioStationList;
            delete room.pltSensorList;
            delete room.pltCameraList;
            this.form = room;
        },
        // 添加电台
        addDevice() {
            let radio = { radioStationId: "", antennaId: "" }
            this.deviceList.push(radio);
        },
        // 删除电台
        deleteDevice(index) {
            this.deviceList.splice(index, 1);
        },
         // 将要提交的数据转为后端需要的格式
         setListAll() {
            // 传感器
            this.form.pltSensorList = this.form.sensorIds ? this.form.sensorIds.map(item => ({ sensorId: item, isUsed: '1' })) : [];
            // 摄像头
            this.form.pltCameraList = this.form.cameraIds ? this.form.cameraIds.map(item => ({ cameraId: item, isUsed: '1' })) : [];
            // 电台
            this.form.pltRadioStationList = this.deviceList ? this.deviceList.map(item => (
                { radioStationId: item.radioStationId, isUsed: '1' , pltAntennaList: [{
                    antennaId: item.antennaId,
                    isUsed: '1'
                }]}
            )) : [];
        },
        // 保存机房数据
        saveRoom() {
            this.setListAll();
            console.log("点击保存:", this.form)
            updateRoom(this.form).then(rs=>{
                if (rs.code == 200) {
                    this.$message.success("修改成功")
                } else {
                    this.$message.error("修改失败")
                }
            }).catch(er=>{
                this.$message.error("修改失败")
            })
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.room-img {
    width: 21px;
    height: 13px;
    vertical-align: bottom;
}

.room-content {
    font-weight: 400;
    font-size: 16px;
    margin-left: 10px;
    width: 90px;
    flex: auto;
}

.room-page {
    background-color: #171D2C;
    margin-bottom: 4px;
    padding-top: 20px;
    box-sizing: border-box;
    min-height: 150px;
}

.room-content-text {
    flex: auto;
    width: calc(100% - 90px);
}

.sw-label {
    // display: flex;
    text-align: left;
    position: relative;

    * {
        font-size: 14px;
    }

    .add-crate {
        position: absolute;
        right: -10px;
        top: 8px;
        width: 25px;
        height: 25px;
        cursor: pointer;
    }

    img {
        height: 24px;
        width: 24px;
        margin-right: 4px;
    }

    span {
        overflow: hidden;
        // white-space: nowrap;
    }
}

.crate-node {
    display: flex;
    margin-bottom: 10px;
}

.delete-device {
    cursor: pointer;
    line-height: 18px;
    // color: #FBD580;
    border-radius: 100%;
    background-color: #FBD580;
    height: 18px;
}

.save-title {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #2CA6E0;
    line-height: 17px;
    font-style: normal;
    text-transform: none;
}

.save-img {
    width: 72px;
    height: 27px;
}

.save-room-page {
    margin-top: 10px;
    text-align: left;
}

.el-input__inner {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    color: white;
    font-style: normal;
    text-transform: none;
}

.room-name {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>